import * as React from "react";
import classNames from "classnames/bind";
import * as styles from "./menus-view.css";
import { IMenusState, IMenu } from "../../core/model";
import { dispatch as appDispatch } from "../../core/app-state";

const cx = classNames.bind(styles);

function MenuPanel (props: { selectedMenus: IMenu[] }) {
  const { selectedMenus } = props;
  const isShow = selectedMenus.length > 0;
  const isShowHeader = selectedMenus.length > 1;
  const lastSelected = isShow ? selectedMenus[selectedMenus.length - 1] : null;
  const onItemClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const div =  e.currentTarget as HTMLDivElement;
    const id = div.getAttribute('id');
    const menu = lastSelected.children.find(o => o.id == id);
    const newMenus = [ ...selectedMenus, menu ];
    appDispatch({
      type: 'menus.selected',
      data: newMenus,
    });
  };

  React.useEffect(() => {
    const node: HTMLDivElement = document.querySelector('#menu_panel');
    if (isShow) {
      const firstSelected = selectedMenus[0];
      const btnEle = document.querySelector(`#menu_btn___${firstSelected.id}`);
      const btnRect = btnEle.getBoundingClientRect();
      node.style.top = btnRect.bottom + 8 + 'px';
      node.style.left = btnRect.left + 'px';
      node.style.visibility = 'visible';
    } else {
      node.style.visibility = 'hidden';
    }
  });

  return (
    <div className={cx('menus-panel')} id="menu_panel">
      <div>
        <div className={cx('menus-panel-header', { 'is-show': isShowHeader })}>
          {lastSelected?.text}
        </div>
        <div className={cx('menus-panel-body')}>
          {lastSelected?.children?.map(o => (
            <div key={o.id} id={o.id} className={cx('menus-panel-body-item')} onClick={onItemClick}>
              <div className={cx('menus-panel-body-item-text')}>{o.text}</div>
              <div className={cx('menus-panel-body-item-icon', { 'is-show': !!o.children })}></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Menu (props: { menu: IMenu, selectedMenus: IMenu[] }) {
  const { menu, selectedMenus } = props;
  const isSelected: boolean = selectedMenus[0]?.id == menu.id || false;

  const onClick = () => {
    appDispatch({
      type: 'menus.selected',
      data: [menu],
    });
  };

  return (
    <div className={cx('menu')}>
      <div id={`menu_btn___${menu.id}`} onClick={onClick} className={cx('menu-btn', { 'is-selected': isSelected })}>
        { menu.text }
      </div>
    </div>
  );
}

export function MenuBar (props: { menusState: IMenusState }) {
  const { menusState } = props;
  const { menus, selectedMenus } = menusState;
  
  const refCb = React.useCallback((node: HTMLDivElement) => {
    if (node) {
      document.addEventListener('mousedown', (e) => {
        if (!node.contains(e.target as Node)) {
          appDispatch({
            type: 'menus.clean'
          });
        }
      });
    }
  }, []);

  return (
    <div ref={refCb} className={cx('menu-bar')}>
      <div className={cx('menu-btns')}>
        { menus.map(o => <Menu key={o.id} menu={o} selectedMenus={selectedMenus} />) }
      </div>
      <MenuPanel selectedMenus={selectedMenus} />
    </div>
  );
}
